<template>
  <view class="section-header">
    <view :class="['section-indicator', type]"></view>
    <text class="section-title">{{ title }}</text>
    <text v-if="showHint" class="swipe-hint">左右滑动 ›</text>
  </view>
</template>

<script>
export default {
  name: 'SectionHeader',
  props: {
    title: {
      type: String,
      required: true
    },
    type: {
      type: String,
      default: 'purple',
      validator: (value) => {
        return ['purple', 'pink', 'blue'].includes(value);
      }
    },
    showHint: {
      type: Boolean,
      default: false
    }
  }
};
</script>

<style>
.section-header {
  display: flex;
  align-items: center;
  gap: 20rpx;
  margin-bottom: 30rpx;
}

.section-indicator {
  width: 6rpx;
  height: 40rpx;
  border-radius: 10rpx;
}

.section-indicator.purple {
  background-color: #8b5cf6;
}

.section-indicator.pink {
  background-color: #ec4899;
}

.section-indicator.blue {
  background-color: #3b82f6;
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
}

.swipe-hint {
  font-size: 24rpx;
  color: #9ca3af;
  margin-left: auto;
}
</style>